<template>

    <div class="box">
        <header class="header">
            <van-nav-bar title="详情页" left-text="" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="main">
            <img style="width: 100%;" :src="obj.image" alt="">
            <p>{{ obj.title }}</p>
            <p>{{ obj.price }}</p>
        </main>
    </div>
    <footer class="footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.zongList" @click="$router.push('/cart')"/>
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addcart"/>
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
</template>

<script setup>
import request from '@/uitle/requset'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
const router = useRouter()
const route = useRoute()
const obj = ref({})
onMounted(() => {
    request.get('/detail', {
        params: {
            id: route.params.id
        }
    }).then((res) => {
        if (res.data.code == 200) {
            obj.value = res.data.data
        }
    })
})

const addcart = () => {
    if(localStorage.getItem('token')){
        store.addItem(obj.value)
    }else{
        router.push('/login')
    }
}
</script>

<style lang="scss" scoped></style>